﻿<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>上下左右无缝滚动jQuery插件</title>
    <meta name="keywords" content="上下左右,无缝滚动,jQuery插件" />
    <meta name="description" content="上下左右无缝滚动jQuery插件下载。实现上下左右自动滚动、无缝滚动。" /> 
    <meta name="author" content="js代码(www.jsdaima.com)" />
    <meta name="copyright" content="js代码(www.jsdaima.com)" />
    <script type="text/javascript" src="/static/js/protect.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="demo.css"/>
</head>
<body>
<div class="container">
    <p>左右滚动</p>
    <div class="roll-wrap roll_row" id="a">
        <ul class="roll__list" style="position: absolute; left: 0; top: 0;">
            <li>1</li>
            <li style="width: 200px;">2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <!--<li>9</li>
            <li>10</li>
            <li>11</li>-->
        </ul>
        <a class="control pre" href="javascript:;">&lt;</a>
        <a class="control next" href="javascript:;">&gt;</a>
    </div>
    <p>左右自动滚动</p>
    <div class="roll-wrap roll_row" id="b">
        <ul class="roll__list" style="position: absolute; left: 0; top: 0;">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
        </ul>
        <a class="control pre" href="javascript:;">&lt;</a>
        <a class="control next" href="javascript:;">&gt;</a>
    </div>
    <p>上下滚动</p>
    <div class="roll-wrap roll_col" id="c">
        <ul class="roll__list" style="position: absolute; left: 0; top: 0;">
            <li class="li-1">1</li>
            <li class="li-2">2</li>
            <li class="li-3">3</li>
            <li class="li-4">4</li>
        </ul>
        <a class="control pre" href="javascript:;">&lt;</a>
        <a class="control next" href="javascript:;">&gt;</a>
    </div>
    <p>上下自动滚动</p>
    <div class="roll-wrap roll_col h600" id="d">
        <ul class="roll__list" style="position: absolute; left: 0; top: 0;">
            <li class="li-1">1</li>
            <li class="li-2">2</li>
            <li class="li-3">3</li>
            <li class="li-4">4</li>
            <li class="li-1">5</li>
            <li class="li-2">6</li>
            <li class="li-3">7</li>
            <li class="li-4">8</li>
            <li class="li-2">9</li>
        </ul>
        <a class="control pre" href="javascript:;">&lt;</a>
        <a class="control next" href="javascript:;">&gt;</a>
    </div>
    <p>不间断向左滚动</p>
    <div class="roll-wrap roll_row" id="e">
        <ul class="roll__list" style="position: absolute; left: 0; top: 0;">
            <li>1</li>
            <li style="width: 200px;">2</li>
            <li>3</li>
            <li style="width: 400px;">4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </div>
    <p>不间断向右滚动</p>
    <div class="roll-wrap roll_row" id="f">
        <ul class="roll__list" style="position: absolute; right: 0; top: 0; width: 1480px">
            <li>1</li>
            <li style="width: 200px;">2</li>
            <li>3</li>
            <li style="width: 400px;">4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </div>
    <p>不间断向上滚动</p>
    <div class="roll-wrap roll_col" id="g">
        <ul class="roll__list" style="position: absolute; left: 0; top: 0;">
            <li class="li-1">1</li>
            <li class="li-2">2</li>
            <li class="li-3">3</li>
            <li class="li-4">4</li>
        </ul>
    </div>
    <p>不间断向下滚动</p>
    <div class="roll-wrap roll_col" id="h">
        <ul class="roll__list" style="position: absolute; left: 0; bottom: 0;">
            <li class="li-1">1</li>
            <li class="li-2">2</li>
            <li class="li-3">3</li>
            <li class="li-4">4</li>
        </ul>
    </div>
</div>
<script src="rollslide.js"></script>
<script>
    $('#a').rollSlide({
        orientation: 'left',
        num: 1,
        v: 1000,
        space: 3000,
        isRoll: false
    });
    $('#b').rollSlide({
        orientation: 'right',
        num: 2,
        v: 1500,
        space: 3000,
        isRoll: true
    });
    $('#c').rollSlide({
        orientation: 'top',
        num: 1,
        v: 1500,
        //space: 500,
        isRoll: true
    });
    $('#d').rollSlide({
        orientation: 'bottom',
        num: 3,
        v: 1500,
        space: 1000,
        isRoll: true
    });
    $('#e').rollNoInterval().left();
    $('#f').rollNoInterval().right();
    $('#g').rollNoInterval().top();
    $('#h').rollNoInterval().bottom();
</script>
</body>
</html>